<template>
	<view class="page">
		<u-gap height="20" bgColor="#f4f4f4"></u-gap>
		<!-- 订单号 -->
		<view class="order-item">
			<text class="order-item_label">订单号</text>
			<text class="order-item_value">{{order_id}}</text>
		</view>
		<u-line  color="#eeeeee"></u-line>
		<!-- 订单金额 -->
		<view class="order-item">
			<text class="order-item_label">订单金额</text>
			<text class="order-item_value">￥{{price}}</text>
		</view>
		<view class="pay-label">请选择支付方式</view>
		<radio-group name="" @change="payChange">
			<label class="pay-item">
				<view>
					<uni-icons
					type="icon-weixinzhifu" 
					customPrefix="iconfont" 
					size="40rpx" 
					color="#00C752"></uni-icons>
					<text class="pay-item_name">微信支付</text>
				</view>
				<radio
				value="wx_pay" 
				:checked="currentPay === 'wx_pay'"
				color="#E81526" 
				style="transform: scale(.9);" />
			</label>
			<!-- #ifndef MP-WEIXIN -->
			<label class="pay-item">
				<view>
					<uni-icons
					type="icon-zhifubaozhifu" 
					customPrefix="iconfont" 
					size="40rpx" 
					color="#00B7FE"></uni-icons>
					<text class="pay-item_name">支付宝支付</text>
				</view>
				<radio
				value="zfb_pay"
				:checked="currentPay === 'zfb_pay'"
				 color="#E81526"
				 style="transform: scale(.9);" />
			</label>
			<!-- #endif -->
			<label class="pay-item">
				 <view>
				 	<uni-icons
				 	type="icon-balance#00C752" 
				 	customPrefix="iconfont" 
				 	size="40rpx" 
				 	color="#FF9700"></uni-icons>
				 	<text class="pay-item_name">预存款支付(余额：0.00)</text>
				 </view>
				 <radio
				 value="ye_pay"
				 :checked="currentPay === 'ye_pay'"
				  color="#E81526"
				  style="transform: scale(.9);" />
			</label>
		</radio-group>
		<view class="btn-box">
			<view class="btn-item cancel-btn" @tap="cancelClick">取消支付</view>
			<view class="btn-item submit-btn" @tap="submitClick">确定支付</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {postOrderPayApi, getPayTypeListApi} from '@/api/order.js'
	export default {
		computed: {
			...mapState(['open_id','user_id','token'])
		},
		data() {
			return {
				order_id: '', // 订单号
				price: '', // 订单金额
				currentPay: 'wx_pay'
			};
		},
		onLoad({order_id = '', price = ''}) {
			this.order_id = order_id
			this.price = price
			this.getPayTypeList()
		},
		methods: {
			// 获取支付方式
			async getPayTypeList() {
				const res = await getPayTypeListApi({
					user_id: this.user_id,
					token: this.token
				})
				console.log(res.data.info)
			},
			payChange(e) {
				this.currentPay = e.detail.value
			},
			cancelClick() {
				uni.showModal({
					title: '提示',
					content: '是否需要放弃支付?',
					success: (e) => {
						if(e.confirm) {
							uni.navigateBack()
						}
					}
				})
			},
			async submitClick() {
				let pay_type = ''
				switch(this.currentPay) {
					case 'wx_pay':
						// #ifdef MP-WEIXIN
							pay_type = 'wxpayMp'
						// #endif
						// #ifdef APP-PLUS
							pay_type = 'wxpay'
						// #endif
					break;
					case 'zfb_pay':
						pay_type = 'alipay'
					break;
					case 'ye_pay':
						pay_type = 'balance'
					break;
				}
				// 发起支付
				const res = await postOrderPayApi({
					user_id: this.user_id,
					order_id: this.order_id,
					money: this.price,
					pay_type: pay_type,
					passback_params: 'goods',
					openid: this.open_id
				})
				const data = res.data
				switch(this.currentPay) {
					case 'wx_pay':
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: 'MD5',
						paySign: data.paySign,
						success: (e) => {
							uni.showToast({
								title: '支付成功!'
							})
							console.log('success:' + JSON.stringify(res));
						},
						fail: (err) => {
							uni.showToast({
								title: '支付失败:' + JSON.stringify(err),
								icon: 'none'
							})
							console.log('fail:' + JSON.stringify(err));
						}
					})
					break;
					case 'zfb_pay':
					uni.requestPayment({
					    provider: "alipay", 
					    orderInfo: data,
					    success: (e) => {
					    	uni.showToast({
					    		title: '支付成功!'
					    	})
					    	console.log('success:' + JSON.stringify(res));
					    },
					    fail: (err) => {
					    	uni.showToast({
					    		title: '支付失败:' + JSON.stringify(err),
					    		icon: 'none'
					    	})
					    	console.log('fail:' + JSON.stringify(err));
					    }
					})
					break;
					case 'ye_pay':
					break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background-color: #f4f4f4;
	min-height: 100vh;
}
.order-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	&_label {
		font-size: 28rpx;
		color: #333333;
	}
	&_value {
		font-size: 28rpx;
		color: #333333;
	}
}
.pay-label {
	font-size: 28rpx;
	color: #333333;
	padding-left: 30rpx;
	box-sizing: border-box;
	height: 100rpx;
	line-height: 100rpx;
}
.pay-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 30rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	&_name {
		font-size: 24rpx;
		color: #666666;
		margin-left: 20rpx;
	}
}
.btn-box {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 60rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	justify-content: space-between;
	.btn-item {
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
	}
	.cancel-btn {
		font-size: 28rpx;
		color: #333333;
		border: 2rpx solid #cccccc;
	}
	.submit-btn {
		font-size: 28rpx;
		color: #ffffff;
		background-color: #E81526;
		
	}
}
</style>
